<%@ page language="java" contentType="text/html; charset=US-ASCII"
    pageEncoding="US-ASCII"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page import="java.util.*" %>
<br>
<div id="datapower-alert-container"></div>
<div class="row">
	<div class="col-lg-8">
		<h3>Datapower Dashboard</h3>
	</div>
	<div class="col-lg-4">
		<div class="pull-right">
			<form class="form-inline" role="form">
					<div class="form-group">
				         <select id="dpregionListSelect" class="form-control">
			               	 <option selected>Region</option>
			             </select>
			       </div>   
			       <div class="form-group">
				         <select id="dpprofileListSelect" class="form-control">
			               		 <option selected>Profiles</option>
			             </select>
			       </div>  
			       <div class="form-group">
			           <button type="button" class="btn btn-default form-control" id="dpDashboardSettingBtn"><i class="fa fa-cog"></i></button>
		          </div>  
			</form>
		</div>	
	</div>
</div>
<div class="row" id="dpChartArea">
	<div class="col-lg-4">
		<!--Memory Graph Panel -->
		<div class="panel panel-primary">
			<div class="panel-heading">
		       <i class="fa fa-line-chart fa-fw"></i><a style="color:white" data-toggle="collapse" href="#collapseOne">Memory Usage</a>
		        <div class="pull-right">
		        	<span id="memoryUsageConnectionStatus"></span>
		        </div>
		    </div>
		     <div id="collapseOne" class="panel-collapse collapse in">
			     <div class="panel-body">
			    	 <div id="dpMemoryChart" style="height:200px"></div>
			    	  <div id="dpMemoryChartJustGage"></div>
			     </div>
		     </div>
		</div>
	</div>
	<!--System Load Graph Panel -->
	<div class="col-lg-4">
		<div class="panel panel-primary">
			<div class="panel-heading">
				
		       <i class="fa fa-line-chart fa-fw"></i><a style="color:white" data-toggle="collapse" href="#collapseThree">System Load</a>
		       <div class="pull-right">
		        	<span id="systemUsageConnectionStatus"></span>
		        </div>
		    </div>
		    <div id="collapseThree" class="panel-collapse collapse in">
			     <div class="panel-body">
			    	 <div id="dpSystemLoadChart" style="height:200px"></div>
			    	 <div id="dpSystemLoadChartJustGage"></div>
			     </div>
		     </div>
		 </div>
	</div>
	<!--CPU Usage Graph Panel -->
	<div class="col-lg-4">
			<div class="panel panel-primary">
				<div class="panel-heading">
			       <i class="fa fa-line-chart fa-fw"></i><a style="color:white" data-toggle="collapse" href="#collapseTwo">CPU Usage</a>
			        <div class="pull-right">
			        	<span id="cpuUsageConnectionStatus"></span>
			        </div>
			    </div>
			    <div id="collapseTwo" class="panel-collapse collapse in">
				     <div class="panel-body">
				     	
				    	 <div id="dpcpuChart" style="height:200px"></div>
				     </div>
			    </div>
			 </div>
	</div>
</div>
<!-- End of Second Row -->

<!--  Start of Third Row -->
<div class="row">
	<div class="col-lg-7">
		 <div class="panel panel-primary">
			<div class="panel-heading">
		       <i class="fa fa-tasks fa-fw"></i><a style="color:white" data-toggle="collapse" href="#collapseFour">Transaction Times</a>
		        <div class="pull-right">
		        	 <select id="dpTransactionTimesDomainNames" style="color: #428bca;">
			               	<option selected>Domains</option>
			         </select>
		        </div>
		    </div>
		    <div id="collapseFour" class="panel-collapse collapse in">
			     <div class="panel-body">
			     		<p>PS: the Values are in Milliseconds(mSecs)</p>
				     	<div class="table-responsive">
				    		<table id="dpTransactionTimesTable" class="table table-striped table-hover">
	    							<thead>
							            <tr>
							                <th>Proxy</th>
							                <th>1Sec</th>
							                <th>1Min</th>
							                <th>10Min</th>
							                <th>1Hr</th>
							                <th>1D</th>
							            </tr>
							        </thead>
							       
							        <tbody>
							        </tbody> 
	    						</table>
	    				</div>
			  	  </div>
		 	</div>
		 </div>
	</div>
	<div class="col-lg-5">
		<div class="panel panel-primary">
			<div class="panel-heading">
		       <i class="fa fa-tasks fa-fw"></i><a style="color:white" data-toggle="collapse" href="#collapseFive">File System Status</a>
		    </div>
		     <div id="collapseFive" class="panel-collapse collapse in">
		     	 <div class="panel-body">
		     	 	<div class="table-responsive">
		     	 		<table id="dpFileSystemStatusTable" class="table table-striped table-hover">
	     	 				    <tbody>
						        </tbody> 
		     	 		</table>
		     	 	</div>
		     	 </div>
		     </div>
		</div>
	</div>
</div>

<!-- End of the Third Row -->

<!--  Settings Popup elements -->
<div id="dpSetting-popover-head" class="hide"><i class="fa fa-cog fa-fw"></i>Setting</div>
<div id="dpSetting-popover-content" class="hide">
	<form onsubmit="return false;" role="form">
      <div class="form-group form-group-sm">
         <label for="refreshInterval">Refresh Interval:</label>
         <input type="text" class="form-control" id="refreshInterval" value="60000"  onchange="$('#dpSetting-popover-content #refreshInterval').attr('value', this.value)"/>
         <p class="help-block"><small>In Milliseconds: For better performance use default value</small></p>
      </div>
     </form>
</div>

<script>
 $(document).ready(function() {
 		var allRegions= uft.getProfileUniqueRegions()
 		if( !jQuery.isEmptyObject(allRegions)){
 			dwr.util.addOptions("dpregionListSelect",allRegions)
 			$('#dpregionListSelect').focus()
 		}
 		var allProfileList;
 		var dpTransactionTimesTable;
 		var dpMemorydata = {}
		var dpSystemUsageData = {}
		var dpCpuUsageData = {}
		var dpChartOptions = {
			lines: {
				show: true
			},
			points: {
				show: true
			},
			series: {
				shadowSize: 0	// Drawing is faster without shadows
			},
			xaxis: {
				mode: "time",
				minTickSize: [5, "minute"],
				
				min: (moment().subtract(5,"minute")).toDate().getTime(),
				//tickLength: 5,  
          		timezone: "browser",
          		twelveHourClock: true,
          		axisLabel: "Time",
	            axisLabelUseCanvas: true,
	            axisLabelFontSizePixels: 12,
	            axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
	            axisLabelPadding: 5
				
			},
			legend: { position: "nw" }
		
		};
		$( "#dpregionListSelect" ).change(function() {
			if ( $("#dpregionListSelect").val() != "Region"){
				allProfileList=uft.getProfileByTypeRegion("Datapower",$("#dpregionListSelect").val())
				if( !jQuery.isEmptyObject(allProfileList)){
					$('#dpregionListSelect').blur();
					
				//	$("#dpprofileListSelect option:gt(1)").empty()
			
					$('#dpprofileListSelect option:not(:first)').remove();
					dwr.util.addOptions("dpprofileListSelect",allProfileList,"profileName")
	 				$('#dpprofileListSelect').focus()
				}else{
	 				$("#datapower-alert-container").atf_alert_flyover("No Datapower Profiles Found for this Regions", "Oops!")
	 			}
			}
		})
		$( "#dpprofileListSelect" ).change(function() {
			if ( $("#dpprofileListSelect").val() != "Profile"){
				initializeChart();
				updateDomainName();
				uft.stopTimer("DPDASH")
				refreshDPData();
				uft.startTimer("DPDASH",refreshDPData,parseInt($("#dpSetting-popover-content #refreshInterval").val()));
			}
		})
		$('#dpDashboardSettingBtn').popover({ 
		    html : true,
		    placement: 'left',
		    title: function() {
		      return $("#dpSetting-popover-head").html();
		    },
		    content: function() {
		      return $("#dpSetting-popover-content").html();
		    }
		});
		$("#dpTransactionTimesDomainNames").change(function(){
			if( $("#dpTransactionTimesDomainNames").val() != "Domains" ){
				updateDpTransactionTimes()
			}
			
		})
		$('#dpDashboardSettingBtn').on('hidden.bs.popover', function () {
			if ( jQuery.isNumeric($("#dpSetting-popover-content #refreshInterval").val())){
				if ( parseInt($("#dpSetting-popover-content #refreshInterval").val()) >= 30000){
					uft.stopTimer("DPDASH")
					uft.startTimer("DPDASH",refreshDPData,parseInt($("#dpSetting-popover-content #refreshInterval").val()));
				}else{
					$("#index-alert-container").atf_alert_flyover("Refresh Interval value is too low. Should be more then 30000", "Value Too Low")
					$('#dpSetting-popover-content #refreshInterval').attr('value', "60000")
				}
				
			}
		})
		function refreshDPData(){
			var profileName=$("#dpprofileListSelect").val()
			var region=$("#dpregionListSelect").val()
			if( $("#dpregionListSelect").val() != "Region" && $("#dpprofileListSelect").val() != "Profile"){
				if ( $("#dashboardTabs li.active a" ).text() == "Datapower" ) {
					dpDashboardController.getAllDatapowerData(region, profileName,{
						callback:function(data){
							if(!jQuery.isEmptyObject(data)){
								if(!jQuery.isEmptyObject(data.MemoryStatus)){
									
									uft.udateDivStatus("memoryUsageConnectionStatus", "SUCCESS")
									dpMemorydata.TotalMemory.data.push([data.MemoryStatus.timestamp,data.MemoryStatus.TotalMemory])
									dpMemorydata.UsedMemory.data.push([data.MemoryStatus.timestamp,data.MemoryStatus.UsedMemory])
									dpMemorydata.FreeMemory.data.push([data.MemoryStatus.timestamp,data.MemoryStatus.FreeMemory])
									var temp=[]
									temp.push(dpMemorydata.TotalMemory)
									temp.push(dpMemorydata.UsedMemory)
									temp.push(dpMemorydata.FreeMemory)
									$("#dpMemoryChartJustGage").empty();
								  	var g = new JustGage({
									 id: "dpMemoryChartJustGage",
									 value: parseInt(data.MemoryStatus.Usage),
									 min: 0,
									 max: 100,
									 relativeGaugeSize: true,
									 title: "Usage"
									
									}); 
									var opts=dpChartOptions;
									opts.yaxes=[{
										tickFormatter: function (val, axis) {return val + " MB";},
										axisLabel: "Memory",
										axisLabelUseCanvas: true,
										axisLabelFontSizePixels: 12,
										axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
										axisLabelPadding:5}]
							
									$.plot("#dpMemoryChart", temp, opts).setupGrid();
								}
								if(!jQuery.isEmptyObject(data.CPUUsage)){
									uft.udateDivStatus("cpuUsageConnectionStatus", "SUCCESS")	
									dpCpuUsageData.OneMinute.data.push([data.CPUUsage.timestamp,data.CPUUsage.OneMinute])
									var temp=[]
									temp.push(dpCpuUsageData.OneMinute)
									var opts=dpChartOptions;
									opts.yaxes=[{
										tickFormatter: function (val, axis) {return val + " %";},
										axisLabel: "CPU Usage",
										axisLabelUseCanvas: true,
										axisLabelFontSizePixels: 12,
										axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
										axisLabelPadding:5}]
									$.plot("#dpcpuChart", temp, opts).setupGrid();
								}
								if(!jQuery.isEmptyObject(data.SystemUsage)){
									 uft.udateDivStatus("systemUsageConnectionStatus", "SUCCESS")
									 dpSystemUsageData.Interval.data.push([data.SystemUsage.timestamp,data.SystemUsage.Interval])
									  //  dpSystemUsageData.Load.data.push([data.timestamp,data.Load])
									 dpSystemUsageData.WorkList.data.push([data.SystemUsage.timestamp,data.SystemUsage.WorkList])
									 var temp=[]
									 temp.push(dpSystemUsageData.Interval)
									  //  temp.push(dpSystemUsageData.Load)
									 temp.push(dpSystemUsageData.WorkList)
									 $("#dpSystemLoadChartJustGage").empty();
									   	var g = new JustGage({
											 id: "dpSystemLoadChartJustGage",
											 value: parseInt(data.SystemUsage.Load),
											 min: 0,
											 max: 100,
											 relativeGaugeSize: true,
											 title: "Load"
											
										}); 
									var opts=dpChartOptions;
									opts.yaxes=[]
								  	$.plot("#dpSystemLoadChart", temp, opts).setupGrid();
								}
							}
						},
						errorHandler:function(errorString, exception){
							uft.udateDivStatus("memoryUsageConnectionStatus", "ERROR")
							uft.udateDivStatus("cpuUsageConnectionStatus", "ERROR")
						}
					})
					updateDpTransactionTimes();
				}else{
					uft.stopTimer("DPDASH")
				}
			}
		}
		function updateDpTransactionTimes(){
			if ( $("#dpTransactionTimesDomainNames").val() != "Domains"){
				if( $("#dpregionListSelect").val() != "Region" && $("#dpprofileListSelect").val() != "Profile"){
					dpDashboardController.getHTTPTransactionsTimes($("#dpregionListSelect").val(),$("#dpprofileListSelect").val(),$("#dpTransactionTimesDomainNames").val(),{
						callback:function(data){
							if(!jQuery.isEmptyObject(data)){
								if( $.fn.dataTable.isDataTable("#dpTransactionTimesTable")) {	
									dpTransactionTimesTable = $("#dpTransactionTimesTable").dataTable();
									dpTransactionTimesTable.fnClearTable()
									dpTransactionTimesTable.fnAddData(data);
									dpTransactionTimesTable.fnDraw();
									
								}else{
									dpTransactionTimesTable=$('#dpTransactionTimesTable').dataTable( {
								        data: data,
								        columns: [
								  
								            { data: "proxy" },
								            { data: "tenSeconds" },        
								            { data: "oneMinute"},
								            { data: "tenMinutes"},
								            { data: "oneHour"},
								            { data: "oneDay"},
								        ]
							    	});
								}
							}
						}
					})
				}
			}
		}
		function updateDomainName(){
		if( $("#dpregionListSelect").val() != "Region" && $("#dpprofileListSelect").val() != "Profile"){
			var profileName=$("#dpprofileListSelect").val()
			var region=$("#dpregionListSelect").val()
			dpDashboardController.getDomainStatus(region,profileName,{
						callback:function(data){
							if(!jQuery.isEmptyObject(data)){
								dwr.util.addOptions("dpTransactionTimesDomainNames",data)
								//$("#dpTransactionTimesDomainNames option:first").attr('selected','selected');
							
							}
						}
			})
			dpDashboardController.getFilesystemStatus(region,profileName,{
				callback:function(data){
					if(!jQuery.isEmptyObject(data)){
						
						var tr ="<tr><td>  FreeEncrypted: </td><td>"+data.FreeEncrypted+"</td><td>MB</td></tr>"
								+"<tr><td> TotalEncrypted: </td><td>"+data.TotalEncrypted+"</td><td>MB</td></tr>"
								+"<tr><td> FreeTemporary: </td><td>"+data.FreeTemporary+"</td><td>MB</td></tr>"
								+"<tr><td> TotalTemporary: </td><td>"+data.TotalTemporary+"</td><td>MB</td></tr>"
								+"<tr><td> FreeInternal: </td><td>"+data.FreeInternal+"</td><td>MB</td></tr>"
								+"<tr><td> TotalInternal: </td><td>"+data.TotalInternal+"</td><td>MB</td></tr>"
						$("#dpFileSystemStatusTable > tbody:first").append(tr)
							
			
					}
				}
			})
		}
		}
	
		function initializeChart(){
			dpSystemUsageData ={	
									Interval:{label:"Interval",data:[]},
									WorkList:{label:"WorkList",data:[]}
							   };
			dpMemorydata = {
								TotalMemory:{label:"TotalMemory",data:[]},
								UsedMemory:{label:"UsedMemory",data:[]},
								FreeMemory:{label:"FreeMemory",data:[]}
							}
			dpCpuUsageData ={
								OneMinute:{label:"OneMinute",data:[]}
							}
			//$( "#dpTransactionTimesDomainNames option:gt(1)" ).empty()
			$('#dpTransactionTimesDomainNames option:not(:first)').remove();
			$("#dpTransactionTimesTable tbody").empty();
			$("#dpFileSystemStatusTable tbody").empty();
			
			
		}
 })
</script>